<!-- 
  完成折线图图的开发

  @since 1.0.0
  （1）完成使用固定数据进行操作
 -->
<template>
  <div class="title" style="margin-bottom: 5px;">
    {{ title }}
  </div>
  <div id="XionganPie" ref="XionganPie"></div>
</template>

<script>
import { http } from "@/utils/requests";
import { PieEcharts } from '@/utils/echartsUtils';

export default {
  name: "XionganPie",
  data() {
    return {
      chartIns: null,
    }
  },
  props: {
    year: {
      type: Number,
      default: 2020
    },
    country: {
      type: String,
      default: "安新县"
    }
  },
  // computed: {
  //   title() {
  //     return `标题内容 ${this.year} ${this.country}`; // 根据实际情况生成标题内容
  //   }
  // },
  mounted() {
    // 找到挂在的元素，并获取
    const ele = document.getElementById("XionganPie");
    // 实例化chartsIns对象
    this.chartIns = new PieEcharts(ele);
    // 发送网络请求，并渲染图片
    this.httpRequest({});
    // 测试代码
    // this.chartIns.updateCharts({
    //   title: "饼图",
    //   landtypes: [
    //     'rose1',
    //     'rose2',
    //     'rose3',
    //     'rose4',
    //     'rose5',
    //     'rose6',
    //     'rose7',
    //     'rose8'
    //   ],
    //   countryData: [
    //     { value: 40, name: 'rose 1' },
    //     { value: 33, name: 'rose 2' },
    //     { value: 28, name: 'rose 3' },
    //     { value: 22, name: 'rose 4' },
    //     { value: 20, name: 'rose 5' },
    //     { value: 15, name: 'rose 6' },
    //     { value: 12, name: 'rose 7' },
    //     { value: 10, name: 'rose 8' }
    //   ],
    // });
  },
  methods: {
    /**
     * http请求
     * @param {Object} params 传入的查询参数
     */
    httpRequest(params) {
      const url = "/api/countryLandstype/queryLandtype?country=" + this.country + "&year=" + this.year;
      // http异步请求
      http.getRequest(url, params).then(res => {
        const CountryData = [];
        for (let i = 0; i < res.countryData.length; i++) {
          CountryData.push({ value: res.countryData[i], name: res.landtypes[i] })
        }
        res.countryData = CountryData;
        this.chartIns.updateCharts(res);
      }, err => {
        console.log(err);
      });
    }
  }
}
</script>
    
<style scoped>
#XionganPie {
  /* TODO 需要完成对height的修改 */
  height: 400px;
  width: 400px;
  /* margin: 10px; */
}
</style>